<div id="notice_manage">
    <div class="notice_manage">
        <el-row class="table_search">
            <el-col :span="24">
                <template>
                    <el-select v-model="parameters.status" placeholder="全部状态">
                        <el-option
                                v-for="item in lists"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button type="primary" @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
                </template>
                <el-button class="add-notice" type="primary" icon="el-icon-plus" @click="addNotice">新增通知</el-button>
            </el-col>
        </el-row>

        <!--<el-row class="table_btn">-->
        <!--<el-col :span="24" class="text-r">-->
        <!--<el-button type="danger" icon="el-icon-plus" @click="addNotice">新增通知</el-button>-->
        <!--</el-col>-->
        <!--</el-row>-->

        <template>
            <el-table
                    size="mini"
                    :data="tableData"
                    style="width: 100%"
                    @row-click='handleRowHandle'>
                <el-table-column
                        align="center"
                        prop="notifySeq"
                        label="通知编号"
                        width="200">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="phoneType"
                        label="通知类型"
                        width="200">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="200"
                        prop="status"
                        label="通知状态">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="200"
                        prop="createDate"
                        :formatter="formatterTime"
                        label="创建时间">
                </el-table-column>

                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="danger"
                                   v-if="scope.row.status == '正常'?true:false"
                                   size="mini"
                                   @click="retract(scope.$index, scope.row)"
                                   style="color: #fff">
                            撤回
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页-->

            <div class="block footerBox" id="fenyeBox">
                <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :current-page.sync="currentPage"
                        :total="totalCount">
                </el-pagination>
            </div>
        </template>

    </div>
    <div class="isShowingBox" v-show="isShowingBox"></div>{{isOverflow}}
    <el-dialog title="新增通知" :close-on-press-escape="isEsc" :close-on-click-modal="ismodalClose" :show-close="showDelBtn" :visible.sync="dialogFormVisible">
        <span class="delDialogBtn" @click="closeAddDialog">x</span>
        <el-form
                class="add-template-form"
                :rules="rules"
                ref="form"
                :model="form"
                label-width="200px">

            <el-form-item label="所属机构" prop="orgId" :label-width="formLabelWidth">
                <el-input type="" v-model="form.orgName"  onclick="showMenu();"   readonly style="width: 60%;"></el-input>
                <div id="menuContent"  class="menuContent" style="width: 60%;display:none; position: absolute;z-index: 1000;overflow: auto;">
                    <el-tree
                            node-key="id"
                            ref="orgTree"
                            :data="orgTree"
                            show-checkbox
                            :props="defaultProps"
                            @check-change="treeCheck"
                            style="margin-top:0; width: 100%; height: 300px;"></el-tree>
                </div>
            </el-form-item>
            <el-form-item label="所属商户" prop="corpId" :label-width="formLabelWidth">
                <el-select v-model="form.corpId" filterable multiple placeholder="请选择"  style="width: 60%;">
                    <el-option
                            v-for="item in merchantList"
                            :key="item.corpId"
                            :label="item.corpName"
                            :value="item.corpId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="通知目标类型"  prop="targetType"  :label-width="formLabelWidth">
                <el-radio-group v-model="form.targetType">
                    <el-radio label="00">全部</el-radio>
                    <el-radio label="03">单位用户</el-radio>
                    <el-radio label="04">个人用户</el-radio>
                </el-radio-group>
            </el-form-item>
            <!--多行文本框模板-->
            <el-form-item label="通知：" prop="desc" :label-width="formLabelWidth">
                <!--<el-input type="textarea" v-model="form.desc"></el-input>-->
                <textarea name="" v-model="form.desc" class="layui-textarea" style="width: 300px"></textarea>
            </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="caleForm('form')">取 消</el-button>
            <el-button type="primary" @click="goConfirm('form')">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="通知详情" :close-on-press-escape="isEsc" :close-on-click-modal="ismodalClose" :show-close="showDelBtn" :visible.sync="dialogInfoVisible" class="dialogDetails">
        <span class="delDialogBtn" @click="dialogInfoVisible=false;isShowingBox=false">x</span>
        <div class="info-template-content">
            <el-row class="item-row">
                <el-col :span="5" style="color: #666">状态</el-col>
                <el-col :span="19" style="color: #333">{{noticeInfo.status}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="5" style="color: #666">类型</el-col>
                <el-col :span="19" style="color: #333">{{noticeInfo.phoneType}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="5" style="color: #666">通知内容</el-col>
                <el-col :span="19" style="color: #333">{{noticeInfo.notifyContext}}</el-col>
            </el-row>
        </div>

    </el-dialog>
</div>

<script>
    var layer,
        loadRole;
    layui.use('layer', function(){
        layer = layui.layer;
        loadRole  = layer.load(1, {shade: [0.5, '#000']});

    });




    function showMenu() {
        $("#menuContent").slideDown("fast");
        $("body").bind("mousedown", onBodyDown);
    }
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
        notice_manage.form.orgId = notice_manage.$refs.orgTree.getCheckedKeys();
        var params = {
            'orgIds':notice_manage.$refs.orgTree.getCheckedKeys()+""
        }
        //获取所有商户
        sendService('${basePath}bank/getAllMerchantList', params, function (resData) {
            notice_manage.form.corpId =[];
            if(resData.status == 'success'){
                notice_manage.merchantList = resData.t;
            }
        });

    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
            hideMenu();
        }
    }





    var notice_manage =
        new Vue({
            el: "#notice_manage",

            data: {
                isCheckedUser:true,


                isShowingBox:false,
                showDelBtn:false,

                ismodalClose:false,
                isEsc:false,
                fileNameModel:'',
                isTrueName:false,
//                    targetType:'',
                merchantList:'',
                orgTree:'',
                dialogFormVisible: false,
                dialogInfoVisible: false,
                noticeInfo: {},
                defaultProps: {
                    label:'label',
                    children: 'children',
                    leaf:'leaf'
                },
                form: {
                    orgName:'',
                    orgId:'',
                    corpId:[],
                    targetType:'00',
                    desc: '',
//                        name: '',
                    selectId: ''
                },
                rules: {
                    desc: [
                        { required: true, message: '请填写项目描述', trigger: 'blur' }
                    ],
//                        name: [
//                            { required: true, message: '请', trigger: 'blur' }
//                        ],
                    orgId: [
                        { required: true, message: '请选择机构', trigger: 'blur' }
                    ],
                    corpId: [
                        { required: true, message: '请选择商户', trigger: 'blur' }
                    ]
                },
                formLabelWidth: '120px',

                lists: [
                    {
                        value: '',
                        label: '全部状态'
                    }
                    ,
                    {
                        value: '1',
                        label: '正常'
                    },
                    {
                        value: '0',
                        label: '撤回'
                    }
                ],
                value: '',
                tableData: [],
                totalCount:'',
                totalPage:'',
                parameters:{
                    creatorType:'01',
                    status:'',
                    currentPage:''
                },
                currentPage: 1,
                pageSize:10
            },
            methods: {
                clearlNotice:function(f) {
                    this.backHome();
                    this.$refs[f].clearValidate();
                    this.fileNameModel='';
                },
                backHome:function () {

                    this.closeAddDialog();
                    this.isShowingBox = false;
                    this.dialogFormVisible = false;
                    this.dialogInfoVisible = false;
                },
                /**
                 * 点击X关闭模态框
                 * */
                closeAddDialog:function () {
                    var form = this.$refs.form;
                    form.clearValidate();
                    this.isShowingBox = false;
                    this.dialogFormVisible = false;
                    this.dialogInfoVisible = false;
                },


                treeCheck:function(data, checked, indeterminate){
                    notice_manage.form.orgName = '';
                    var allCheckNodes = notice_manage.$refs.orgTree.getCheckedNodes();
                    allCheckNodes.forEach(function (item) {
                        notice_manage.form.orgName = notice_manage.form.orgName + item.label +";";
                    });
                },
                formatterTime: function (row) {
                    return new Date(row.createDate).Format('yyyy-MM-dd   hh:mm:ss');
                },
                //新增通知
                addNotice: function () {
                    this.isShowingBox = true;
                    notice_manage.dialogFormVisible = true;
                },

                //弹窗取消
                caleForm: function (formName) {
                    this.isShowingBox = false;
                    notice_manage.dialogFormVisible = false;
                    notice_manage.$refs[formName].resetFields();
                },

                goConfirm: function (formName) {
                    notice_manage.$refs[formName].validate(
                        function(valid) {
                            if (valid) {
                                var params = {
                                    corpId:notice_manage.form.corpId+'',
                                    targetType:'00',
                                    desc: notice_manage.form.desc
                                };
                                sendService('${basePath}bank/notify/insertNotify', params, function (resData) {
                                    if(resData.status == 'success'){
                                        notice_manage.isShowingBox = false;
                                        notice_manage.dialogFormVisible = false;
                                        notice_manage.$refs[formName].resetFields();
                                        reloadPage('${basePath}bank/notify/getNotifyList');
                                        layer.msg(resData.msg, {icon: 6});
                                    }
                                })
                            } else {
                                return false;
                            }
                        });
                },

                handleCurrentChange: function(currentPage){

                    Pagesearch(this,'${basePath}bank/notify/findnotifyinfoList', this.parameters,currentPage,
                        function (resData) {
                            if(resData.status == 'success'){
                                resData.t.forEach(function (item) {
                                    if(item.status == '1'){
                                        item.status = '正常'
                                    } else if(item.status == '0'){
                                        item.status = '撤回'
                                    } else if(item.status == '2'){
                                        item.status = '草稿'
                                    }
                                    if(item.phoneType == '0001'){
                                        item.phoneType = '系统通知'
                                    }else if(item.phoneType == '0002'){
                                        item.phoneType = '签约通知'
                                    }else if(item.phoneType == '0003'){
                                        item.phoneType = '缴费通知'
                                    }
                                });
                            }
                        });
                },


                searchFun:  function () {

                    Pagesearch(this,'${basePath}bank/notify/findnotifyinfoList', this.parameters,1,
                        function (resData) {
                            if(resData.status == 'success'){

                                resData.t.forEach(function (item) {
                                    if(item.status == '1'){
                                        item.status = '正常'
                                    } else if(item.status == '0'){
                                        item.status = '撤回'
                                    } else if(item.status == '2'){
                                        item.status = '草稿'
                                    }
                                    if(item.phoneType == '0001'){
                                        item.phoneType = '系统通知'
                                    }else if(item.phoneType == '0002'){
                                        item.phoneType = '签约通知'
                                    }else if(item.phoneType == '0003'){
                                        item.phoneType = '缴费通知'
                                    }
                                });

                                var totalPage = sessionStorage.getItem('totalPage');
                                fenYeProblem(totalPage);
                                sessionStorage.removeItem('totalPage');
                            }
                        });
                } ,

                /**
                 *  var notice_manage
                 *  url merchant/notify/findnotifyinfoList
                 *  option
                 *
                 */

                retract: function (index, row) {

                    stopMaoPao();

                    if(row.status == '正常'){
                        var msg = confirm('此操作将永久删除该通知，是否继续');
                        if(msg){
                            //后台撤回方法
                            var options= {notifySeq: row.notifySeq};
                            sendService('${basePath}/bank/notify/withdrawNotify', options, function (resData) {
                                if(resData.status == 'success'){
                                    row.status = '撤回';
                                    layer.msg('删除成功!', {icon: 6});
                                }
                            })
                        }
                    }
                },
                handleRowHandle: function (row) {
                    notice_manage.dialogInfoVisible = true;
                    notice_manage.isShowingBox = true;
                    notice_manage.noticeInfo = row;
                }
            },
            created: function () {
                Pagesearch(this,'${basePath}bank/notify/findnotifyinfoList', null,1,
                    function (resData) {
                        if(resData.status == 'success'){
                            //loading.close();
                            layer.close(loadRole);
                            resData.t.forEach(function (item) {
                                if(item.status == '1'){
                                    item.status = '正常'
                                } else if(item.status == '0'){
                                    item.status = '撤回'
                                } else if(item.status == '2'){
                                    item.status = '草稿'
                                }
                                if(item.phoneType == '0001'){
                                    item.phoneType = '系统通知'
                                }else if(item.phoneType == '0002'){
                                    item.phoneType = '签约通知'
                                }else if(item.phoneType == '0003'){
                                    item.phoneType = '缴费通知'
                                }
                            });

                            var totalPage = sessionStorage.getItem('totalPage');
                            fenYeProblem(totalPage);
                            sessionStorage.removeItem('totalPage');
                        }
                    });

                sendService("${basePath}bank/org/getUserSelectOrgTree", null, function (resData) {
                    notice_manage.orgTree = resData.t;
                });
            },
            computed:{
                isOverflow:function () {
                    if(this.isShowingBox){
                        $(".main-right").css({'overflow':"hidden"});
                    }
                    if(!this.isShowingBox){

                        $(".main-right").css({'overflow':"auto"});
                    }

                }
            }
        });

</script>

<style scoped>
    .el-table__header,.el-table__body{
        width: 100% !important;
    }
    .el-table tr{
        height: 40px;
    }
    .addUsrtBtn{
        padding: 9px 15px;
        font-size: 12px;
    }
    /*table按钮样式调整开始*/
    .el-button--mini, .el-button--mini.is-round{
        padding: 4px 10px;
    }
    .userManageBox .editBtn{
        color: #409EFF;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .editBtn:hover{
        color: #fff;
        background-color: #409EFF;
        border-color: #409EFF;
    }

    .userManageBox .delBtn{
        color: #fa5555;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .delBtn:hover{
        color: #fff;
        background-color: #fa5555;
        border-color: #fa5555;
    }
    .userManageBox .resetBtn{
        color: #02dda7;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .resetBtn:hover{
        color: #fff;
        background-color: #02dda7;
        border-color: #02dda7;
    }
    .userManageBox .el-button{
        margin-left: 0;
    }
    /*table按钮样式调整结束*/
    .table_search, .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }
    /*.el-table td, .el-table th.is-leaf{*/
    /*border: none;*/
    /*}*/
    .el-table::before{
        height: 0;
    }
    .addUserBox{
        margin-bottom: 0;
        border-bottom: 1px solid #f2f4f8;
    }
    .el-input{
        width: auto;
    }
    .text-r{
        text-align: left;
    }
    .footerBox {
        width: 100%;
        height: 50px;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 9px;
        text-align: right;
    }

    .add-template-form > div{
        margin-left: 45px;
    }
    .el-dialog__header span{
        padding-left: 20px;
    }
    #menuContent{
        left: 0 !important;
        top: 40px !important;
        background-color: #eee;
        border: 1px solid #ccc;
    }
    .edit-template-form > div{
        margin-left: 45px;
    }
    /*.edit_dialog .el-form-item.is-required .el-form-item__label:before{*/
    /*content: '';*/
    /*}*/
    #addMenuContent{
        left: 0 !important;
        top: 40px !important;
        background-color: #eee;
        border: 1px solid #ccc;
    }


    .dialogDetails .topNav{
        margin-left: 30px;
        margin-bottom: 20px;
    }
    .dialogDetails .title-template{
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        padding-left: 30px;
        margin-bottom: 10px;
        color: #333333;
        background: #ffffff;
    }

    .dialogDetails .info-template-content{
        background: #ffffff;
    }
    .dialogDetails .item-row{
        height: 46px;
        line-height: 46px;
        font-size: 16px;
        padding-left: 60px;
    }
    .dialogDetails .item-row div:first-of-type{
        color: #666;
        text-align: left
    }
    .dialogDetails .item-row div:last-of-type{
        color: #333;
        /*padding-left: 80px*/
    }

    .dialogDetails .info-template-content .el-row:nth-child(even){
        background-color: #F8F9FB;
    }
    .dialogDetails .info-template-content .el-row:last-of-type{
        margin-bottom: 30px;
    }
    .dialogDetails .el-dialog{
        overflow: hidden;
        -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        -moz-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        box-shadow: 0 0 16px rgba(0,0,0,0.5);
    }


    .el-dialog__header{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,68,68,1);
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: #fff;
    }
    .el-dialog__headerbtn .el-dialog__close{
        color: #aaa;
        font-size: 22px;

    }
    .el-dialog__body{
        padding-top: 75px;
    }
    .dialogDetails .el-dialog__body{
        padding: 50px 0 0 0 ;
    }
    .errorBox{
        color: #fa5555;
        font-size: 12px;
        line-height: 1;
        padding-top: 4px;
        position: absolute;
        top: 100%;
        left: 0;
    }
    .errorBox2333{
        color: #fa5555;
        font-size: 12px;
    }
    /*#selManage label{*/
    /*position: relative;*/
    /*}*/
    #selManage label:before{
        content: '*';
        color: #fa5555;
        margin-right: 4px;

    }
    .add-notice{
        position: absolute;
        right: 30px;
    }
    .el-radio__inner::after{
        margin-left: -2px;
        margin-top: -2px;
    }
    .el-select__tags{
        top:0;
    }


    .el-dialog__header{
        z-index: 10;
    }
    .el-dialog{
        margin-top: 12vh !important;
    }
    .el-dialog__wrapper{
        overflow: hidden;
    }
    .el-dialog__header span{
        padding-left: 20px;
    }
    .el-dialog__wrapper .el-dialog__body{
        margin-top: 40px;
        height: 350px;
        overflow: auto;
    }
</style>